<template>
	<div class="qx-container p-all-10">
		
		<tabs :target-list="targetList"></tabs>  
		<user-management 
			v-if="tabCurrentIndex == 1 && !stepFlag && !stepFirst" 
			
			@handleTabChange="handleTabChange" 
			@searchAdmin="searchAdmin" 
			:total-page="totalPage"
			:current-page="currentPage">
		</user-management>
		<role-management v-if="(tabCurrentIndex == 2 && !stepFlag && !stepFirst) || (tabCurrentIndex == 1 && stepFlag && !stepFirst) "
		 :menu-list="menuList" @addUserInfo="addUserInfo" ref="role" ></role-management>
		<update-password v-if="(tabCurrentIndex == 3 && !stepFlag) || (tabCurrentIndex == 2 && stepFlag) || stepFirst"></update-password>
		<new-role v-if="tabCurrentIndex == 4" :role-item="roleIetem" @refresh="refresh"></new-role>

	</div>
</template>
<script>
	import tabs from '@/components/tabs/tabs.vue'
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	import userManagement from './components/userManagement.vue'
	import roleManagement from './components/roleManagement.vue'
	import updatePassword from './components/updatePassword.vue'
	import newRole from './components/new-role.vue'

	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	export default {
		data() {
			return {
				adminList: [], // 用户列表数据
				ruleList: [], // 角色数据
				menuList: [], // 菜单列表
				currentPage: 0, // 页码
				totalPage: 0,
				ruleMap: {}, // 对于角色
				targetList: {},
				roleIetem: null, // 角色id
				stepFlag: false,
				stepFirst: false
			}
		},

		mounted() {

			// this._initAdmin()
			//this._initRole()

		},
		methods: {
			_initAdmin() {
				let adminList = sessionStorage.getItem('adminList') ? JSON.parse(sessionStorage.getItem('adminList')) : []


				adminList.forEach(element => {

					if (element.menuUrl == 'permission') {
						let targetRoute = element.menu
						let list = this.tabList
						for (let i = 0; i < targetRoute.length; i++) {
							if (targetRoute[i] == '/admin/list') {
								this._initAdminList()
								return
							} else if (targetRoute[i] == '/rule/list') {

								this.stepFlag = true
								list.forEach((child, childIndex) => {
									if (child.title == '用户管理') {
										list.splice(childIndex, 1)
										list.push({
											name: '1',
											title: '角色管理'
										})
									}
								})

								this.setTabList(list)
								this._initMenu()

								return;
							} else if (targetRoute[i] == '/admin/changepw') {

								this.stepFirst = true
								list.forEach((child, childIndex) => {
									if (child.title == '用户管理') {

										list.splice(childIndex, 1)
										list.push({
											name: '1',
											title: '修改密码'
										})
									}
								})
								localStorage.setItem('roleStep', 2)
								this.setTabList(list)

							}
						}

					}
				})
				if (adminList.length > 0 && adminList['permission']) {
					let targetRoute = adminList['permission'].menu



				}

			},
			handleTabChange(page) {
				this.currentPage = page
				this._initAdminList()
			},
			searchAdmin(num, value) {
				this.currentPage = 0
				let val = num == 2 ? '' : value
				this._initAdminList(val)
			},
			refresh() {
				this.$refs.role._initRole()
				//this._initRole()
			},
			addUserInfo(id = null) {
				console.log(this.tabList)
				let title = ''
				let list = this.tabList
				if (id) {
					
					this.roleIetem = id
					console.log(this.roleIetem)
					title = '修改角色'

				} else {
					this.roleIetem = ''
					title = '新增角色'
				}
				list.forEach((item, index) => {
					if (item.title == '新增角色' || item.title == '修改角色') {
						list.splice(index, 1)

					}
				})
				this.targetList = {
					name: '4',
					title: title
				}
				this.setTabList(list)
				console.log(this.tabList)

			},
			editUser() {
				this._initAdminList()
			},
			
			// 获取用户角色
			_initRole() {
// 				this.$ajax({
// 					api: 'rule/list/new'
// 				}).then(res => {
// 					console.log(res)
// 					if (res.status === SUCCESS_REQUEST_STATUS) {
// 						this.ruleList = res.data
// 						let rule = {}
// 						for (var i = 0; i < this.ruleList.length; i++) {
// 							rule[this.ruleList[i].id] = this.ruleList[i].name;
// 						}
// 						this.ruleMap = rule
// 					}
// 				})

			},
			_initMenu() {
				this.$ajax({
					api: 'menu/list'
				}).then(res => {
					console.log(res)
					console.log(22)
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.menuList = res.data.menuList
					}
				})
			},
			...mapMutations({
				setTabList: 'SET_TAB_LIST',
				setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
			}),
		},
		computed: {
			...mapGetters([
				'tabList',
				'tabCurrentIndex'
			])
		},

		components: {
			tabs,
			newRole,
			userManagement,
			roleManagement,
			updatePassword
		}

	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.qx-container {
		display: flex;
		flex: 1;
		box-sizing: border-box;
		flex-direction: column;
	}
</style>
